<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="holidayForm" label-width="90px" size="default">
        <el-row>
          <el-col :span="8">
            <el-form-item label="开始日期">
              <el-date-picker
                value-format="YYYY-MM-DD"
                v-model="holidayForm.startTime"
                type="date"
                style="width: 100%;"
                placeholder="开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束日期">
              <el-date-picker
                value-format="YYYY-MM-DD"
                v-model="holidayForm.endTime"
                type="date"
                style="width: 100%;"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型">
              <el-radio-group v-model="holidayForm.type">
                <el-radio-button value="1" label="1">节假日</el-radio-button>
                <el-radio-button value="2" label="2">调休加班</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="节日名称">
              <el-input v-model="holidayForm.description" placeholder="请输入节日名称，例如国庆节" />
            </el-form-item>
          </el-col>

          <el-col :span="10" style="margin-left: 10px;">
            <el-button type="primary" plain @click="clearData">重置</el-button>
            <el-button type="primary" @click="addData">添加</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24" style="margin-top: 10px;border-top: 10px solid rgb(244,244,244);padding-top: 20px;">
      <el-form :model="queryParam" label-width="70px" size="default">
        <el-row>
          <el-col :span="5">
            <el-form-item label="年份">
              <el-date-picker
                clearable
                value-format="YYYY"
                v-model="queryParam.year"
                type="year"
                style="width: 100%;"
                placeholder="请选择年份">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型">
              <el-select v-model="queryParam.type" placeholder="请选择类型" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin-left: 10px;">
            <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24">

      <el-table :data="tabelData" border style="max-height:50vh;overflow:auto;">
        <el-table-column prop="id" label="编号" align="center" width="100" />
        <el-table-column prop="festivalHoliday" label="日期" align="center" />
        <el-table-column prop="type" label="类型" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.type == 1" type="primary">节假日</el-tag>
            <el-tag v-else-if="scope.row.type == 2" type="danger">调休加班</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="节假日名称" align="center" />
        <el-table-column prop="operation" label="操作" align="center">
          <template #default="scope">
            <el-button type="text"  @click="deleteData(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24">
      <div style="display: flex;justify-content: right;margin-top: 15px;">
        <el-pagination v-model:current-page="queryParam.pageNum" v-model:page-size="queryParam.pageSize"
                       :page-sizes="[10, 50, 100]" background
                       layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="getList"
                       @size-change="getList" />
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ref, reactive, nextTick } from 'vue'
import { addHoliday, deleteHoliday, getListHoliday } from '@/views/yearCheck/ykb/holiday'

const options = [{
  value: '1',
  label: '节假日'
}, {
  value: '2',
  label: '调休加班'
}]
const queryParam = reactive({
  pageNum: 1,
  pageSize: 10,
  year: undefined
})

const handleSizeChange = () => {
  console.log('handleSizeChange')
}
const handleCurrentChange = (value) => {
  console.log(value)
}
const total = ref('0')
const tabelData = ref([])

const holidayForm = reactive({
  id: undefined,
  startTime: undefined,
  endTime: undefined,
  //1-假日 2-调休加班
  type: undefined,
  description: undefined
})

const deleteData = (row) => {
  console.log(row.id)
  deleteHoliday(row.id).then(res => {
    ElMessage({
      message: '删除成功！',
      type: 'warning'
    })
    getList()
  })
}

function addData() {
  if (holidayForm.startTime == undefined || holidayForm.endTime == undefined || holidayForm.type == undefined || holidayForm.description == undefined) {
    ElMessage({
      message: '请填写完整！',
      type: 'warning'
    })
    return
  }
  addHoliday(holidayForm).then(res => {
    console.log(res)
    ElMessage({
      message: '添加成功！',
      type: 'success'
    })
    clearData()
    getList()
  })
}

function clearData() {
  holidayForm.startTime = undefined
  holidayForm.endTime = undefined
  holidayForm.type = undefined
  holidayForm.description = undefined
  holidayForm.id = undefined
}

function getList() {
  console.log(queryParam)
  getListHoliday(queryParam).then(res => {
    console.log(res)
    tabelData.value = res.rows
    total.value = res.total
  })
}

getList()
</script>
<style scoped lang="scss">

</style>
